/* 菜单 (Menu) 样式 */
.popup-menu {
  // 基础样式 (大部分由 props 控制)
  background-color: var(--editor-page-background, white);
  box-shadow: var(--editor-shadow, 0 3px 14px 2px rgba(0, 0, 0, 0.05), 
              0 8px 10px 1px rgba(0, 0, 0, 0.06), 
              0 5px 5px -3px rgba(0, 0, 0, 0.1));
  font-size: var(--editor-font-size, 14px);
  border: 1px solid var(--editor-border-color, #cccccc);
  border-radius: var(--dropdown-menu-border-radius, 8px);
  min-width: var(--dropdown-menu-width, 180px);
  padding: var(--dropdown-menu-padding, 8px) 0; // 统一设置：上下8px，左右0
  z-index: 9999; // 确保 z-index 足够高
  
  // overflow 由 JS 动态设置，默认允许溢出以支持子菜单
  
  // 滚动条样式优化（仅在出现滚动条时显示）
  scrollbar-width: thin;
  scrollbar-color: var(--editor-scrollbar-thumb-color, rgba(0, 0, 0, 0.2)) transparent;
  
  // Webkit 浏览器滚动条样式
  &::-webkit-scrollbar {
    width: var(--dropdown-menu-scrollbar-width, 6px);
  }
  
  &::-webkit-scrollbar-track {
    background: transparent;
  }
  
  &::-webkit-scrollbar-thumb {
    background-color: var(--editor-scrollbar-thumb-color, rgba(0, 0, 0, 0.2));
    border-radius: 3px;
    
    &:hover {
      background-color: var(--editor-scrollbar-thumb-hover-color, rgba(0, 0, 0, 0.35));
    }
  }
  
  // 子菜单样式
  &.submenu {
    // 子菜单不受主菜单的横向 overflow 限制
    overflow-x: visible;
    // overflow-y 和 max-height 需要通过父组件传递，应用与主菜单相同的值
    
    // 完全继承主菜单的所有样式
    min-width: var(--dropdown-menu-width, 180px); // 与主菜单保持一致的最小宽度
    max-width: var(--dropdown-menu-width, 180px); // 限制最大宽度，与主菜单一致
    width: var(--dropdown-menu-width, 180px); // 固定宽度，与主菜单一致
    
    // 重置 padding，确保与主菜单一致
    padding-top: var(--dropdown-menu-padding, 8px);
    padding-bottom: var(--dropdown-menu-padding, 8px);
    padding-left: 0; // 确保没有左侧 padding
    padding-right: 0; // 确保没有右侧 padding
    
    // 确保二级菜单允许溢出，以便三级菜单可以显示在外部
    overflow-y: visible;
    
    // 主菜单中的直接子菜单（二级菜单）hover 显示
    &:not(.submenu) .dropdown-item {
      &:hover > .submenu,
      &.has-submenu:hover > .submenu {
        display: block;
      }
    }
  }
}

/* 菜单项 (Item) 样式 */
.menu-item-container {
  position: relative;
  // 重置 <li> 默认样式
  padding: 0;
  margin: 0;
  
  // 关键：:hover 必须在 li (container) 上
  &:hover > .submenu {
    display: block;
  }
}

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--dropdown-menu-item-gap, 8px); // icon 和文字的间距
  padding: var(--dropdown-menu-padding, 8px) var(--dropdown-menu-padding-horizontal, 16px);
  color: var(--editor-text-color, #333);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  
  &:hover {
    background-color: var(--editor-content-node-selected-background, #f5f5f5);
  }
  
  // 禁用状态
  &.is-disabled {
    color: var(--editor-text-color-disabled, #a8a8a8);
    cursor: not-allowed;
    background-color: transparent;
    
    &:hover {
      background-color: transparent;
    }
  }
}

/* DropdownItem 组件使用的样式（与 menu-item 兼容） */
.dropdown-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--dropdown-menu-item-gap, 8px); // icon 和文字的间距
  padding: var(--dropdown-menu-padding, 8px) var(--dropdown-menu-padding-horizontal, 16px);
  color: var(--editor-text-color, #333);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s;
  
  &:hover:not(.is-disabled) {
    background-color: var(--editor-content-node-selected-background, #f5f5f5);
  }
  
  // 禁用状态
  &.is-disabled {
    color: var(--editor-text-color-disabled, #a8a8a8);
    cursor: not-allowed;
    background-color: transparent;
    
    &:hover {
      background-color: transparent;
    }
  }
  
  // 有子菜单的项
  &.has-submenu {
    justify-content: space-between;
    
    // 在父菜单项和子菜单之间添加一个不可见的连接区域，确保鼠标移动时不丢失hover
    // 但要注意不要遮挡箭头区域（右侧约20-30px）
    &::before {
      content: '';
      position: absolute;
      right: var(--dropdown-submenu-arrow-space, 25px); // 从右边留出空间给箭头
      top: 0;
      bottom: 0;
      left: 100%;
      // 创建一个从菜单项到子菜单的连接区域
      background: transparent;
      pointer-events: auto;
      z-index: 9999; // 在子菜单之下，但可以接收鼠标事件
    }
    
    // 确保有子菜单的项在悬停时显示子菜单
    &:hover > .submenu {
      display: block;
    }
    
    // 确保子菜单在hover时保持显示
    > .submenu:hover {
      display: block;
    }
  }
  
  // 确保子菜单在悬停时保持显示
  &:hover > .submenu,
  > .submenu:hover {
    display: block;
  }
  
  // 菜单项图标和内容
  &-icon {
    display: flex;
    align-items: center;
    color: inherit;
  }
  
  &-content {
    flex: 1;
    color: inherit;
  }
  
  // 分割线（在菜单项前面添加分割线）
  &.dropdown-divider {
    position: relative;
    margin-top: var(--dropdown-divider-margin, 6px);
    padding-top: var(--dropdown-divider-margin, 6px);
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background-color: var(--editor-divider-color, var(--editor-border-color, #e5e7eb));
    }
  }
}

/* 子菜单 (Submenu) 样式 */
.submenu {
  position: absolute;
  top: 0;
  left: calc(100% - var(--dropdown-submenu-offset, 12px)); // 稍微覆盖父菜单，为箭头留出足够空间
  margin-top: var(--dropdown-submenu-margin-top, -8px); // 稍微向上偏移，与父项重叠
  margin-left: 0px;
  display: none; // 关键：子菜单默认隐藏
  z-index: 10000; // 确保子菜单在主菜单之上
  pointer-events: auto; // 确保可以接收鼠标事件
  
  // 二级菜单在悬停时保持显示
  &:hover {
    display: block;
  }
  
  // 嵌套子菜单：处理子菜单内的子菜单（三级菜单）
  .dropdown-item.has-submenu {
    overflow: visible;
    
    // 只有在明确的菜单项hover时才显示三级菜单
    &:hover > .submenu {
      display: block;
    }
    
    // 确保三级菜单在悬停时保持显示（包括菜单项和子菜单本身）
    &:hover > .submenu:hover,
    > .submenu:hover {
      display: block;
    }
  }
  
  // 三级菜单的默认样式：绝对定位并默认隐藏
  // 必须确保这个规则优先级足够，覆盖所有其他规则
  .submenu {
    position: absolute; // 确保三级菜单也是绝对定位
    top: 0;
    left: calc(100% - var(--dropdown-submenu-offset, 12px)); // 稍微覆盖父菜单，为箭头留出足够空间
    margin-top: var(--dropdown-submenu-margin-top, -8px); // 稍微向上偏移，与父项重叠
    margin-left: 0px;
    display: none; // 关键：三级菜单默认隐藏
    z-index: 10001; // 比二级菜单更高
    pointer-events: auto; // 确保可以接收鼠标事件
    overflow: visible; // 确保三级菜单不会被二级菜单的滚动容器裁剪
  }
}

// 兼容旧的选择器（确保功能不受影响）
.popup-menu:not(.submenu) {
  .dropdown-item:hover > .submenu,
  .dropdown-item.has-submenu:hover > .submenu {
    display: block;
  }
}

li.dropdown-item {
  &:hover > .submenu:not(.submenu .submenu),
  &.has-submenu:hover > .submenu:not(.submenu .submenu) {
    display: block;
  }
}

.has-submenu {
  justify-content: space-between;
}

.submenu-arrow {
  flex-shrink: 0; // 防止箭头被压缩
  margin-left: auto; // 确保箭头在右侧
  
  &::after {
    content: '›';
    font-size: 16px;
    margin-left: 12px;
    color: var(--editor-text-color-light, rgba(0, 0, 0, 0.5));
  }
}

/* Dropdown 触发器样式 */
.dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 浮动箭头 (Floating UI Arrow) */
.dropdown-arrow {
  position: absolute;
  background: var(--editor-page-background, white);
  width: var(--dropdown-arrow-size, 10px);
  height: var(--dropdown-arrow-size, 10px);
  transform: rotate(45deg);
  border-left: 1px solid var(--editor-border-color, #cccccc);
  border-top: 1px solid var(--editor-border-color, #cccccc);
  z-index: -1; // 确保在菜单内容之下
}
